<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.min.js"></script>
    <script src="dark.js"></script>
    <script src="shine.js"></script>
    <script src="infographic.js"></script>
    <script>
        // 检查系统当前主题
        const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
        // 初始设置主题
        function updateDarkMode(isDark) {
            if (isDark) {
                console.log('当前是深色主题')
                funChartsPie('dark')
            } else {
                console.log('当前是浅色主题')
                funChartsPie('default')
            }
        }
        // 监听主题变化
        darkModeMediaQuery.addEventListener('change', (e) => {
            updateDarkMode(e.matches);
        });
        // 初始化

    </script>

    <script>

    </script>
</head>

<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        function funChartsPie(tem) {
            try {
                // 销毁旧实例
                myChart.dispose();
            } catch { }

            // 基于准备好的dom，初始化echarts实例
            myChart = echarts.init(document.getElementById('main'), tem);

            var option = {
                title: {
                    text: 'Referer of a Website',
                    subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        updateDarkMode(darkModeMediaQuery.matches)
    </script>
</body>

</html>